<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for 列表渲染</title>
</head>

<body>
    <div id="app">
        <h3>1.迭代数组，用的多，掌握</h3>
        <ul>
            <!-- e 代表的是emps数组元素的别名。index 是数组的下标，从0开始。 -->
            <!-- 使用 key 特殊属性，他会基于 key 的变化重新排列元素顺序，并且会移出 key 不存在的元素。 -->
            <li v-for="(e,index) in emps" v-bind:key="e.id">编号：{{index + 1}} --- {{e.name}} ，工资是 {{e.salary}}</li>
        </ul>
        <hr>
        <h3>2.迭代对象，用的比较少，知道就行</h3>
        <ul>
            <!-- value对应的是对象的属性值，key对应的是对象的属性名，index对应的是索引 -->
            <li v-for="(value,key,index) in person">
                第 {{index + 1}} 个属性为 {{key}} ,它的值是 {{value}}
            </li>
        </ul>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                emps: [
                    { id: '1', name: '王佳伟', salary: '2000' },
                    { id: '2', name: '张三', salary: '3000' },
                    { id: '3', name: '李四', salary: '4000' },
                    { id: '4', name: '王五', salary: '5000' },
                    { id: '5', name: '孙六', salary: '6000' }
                ],
                person: {
                    name: '王佳伟',
                    age: 18
                }
            }
        })
    </script>
</body>

</html>